<template>
    <div class="Echarts" >
        {{objProp.option.series[0].data}}
        <div id="main" ref="chart" :style="{height:objProp.boxHeight,width:objProp.boxWidth}" ></div>
    </div>
</template>

<script>
    export default {
        name: "basicChart",
        props: {
            objProp: {
                type: Object
            }
        },
        data(){
            return{
                chartData: this.objProp.chartData,
            }
        },
        methods:{
            drawChart(){
                let myEchart = this.$echarts.init(this.$refs.chart)
                myEchart.setOption(this.objProp.option)
            }
        },
        watch:{
            chartData(){
               this.drawChart()
           },
            fallback(){
                this.drawChart()
            }
        },
       mounted() {
            let that=this
            this.$nextTick(function () {
                that.drawChart()
            })
       }
    }
</script>

<style scoped>

</style>
